<template>
  <v-chart class="chart" :option="option" />
</template>

<script setup>
import { ref } from 'vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts/core'
// 引入柱状图和折线图图表类型
import {
  LineChart
  // 其他需要的图表类型可以在这里引入
} from 'echarts/charts'

// 引入提示框、标题、工具箱等组件
import { TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent } from 'echarts/components'

// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'

// 引入 Canvas 渲染器
import { CanvasRenderer } from 'echarts/renderers'

import _ from 'lodash'
// api接口
import { getReportDataApi } from '@/api/report'

// 设置配置选项
const option = ref({})
// 获取接口数据
async function getReportData() {
  const data = await getReportDataApi()
  option.value = _.merge(customOption, data)
}
getReportData()

// 注册必须的组件
echarts.use([TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent, LineChart, CanvasRenderer, LabelLayout, UniversalTransition])

const customOption = {
  title: {
    text: '用户来源'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#E9EEF3'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  legend: {},
  xAxis: [
    {
      boundaryGap: false
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: []
}
</script>

<style scoped>
.chart {
  width: 700px;
  height: 450px;
}
</style>